@import './variables.less';
@feature-prefix: ~'doc-feature';

@keyframes mask-animation {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes modal-animation {
  from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0;transform: translate3d(-3000px, 0, 0);}
  60% {opacity: 1;transform: translate3d(25px, 0, 0);}
  75% {transform: translate3d(-10px, 0, 0);}
  90% {transform: translate3d(5px, 0, 0);}
  100% {opacity: 1;transform: none;}
}

.@{feature-prefix} {
  &-mask {
    background: rgba(20, 23, 55, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: mask-animation .2s;
  }
  &-modal {
    animation-name: modal-animation;
    animation-duration: 0.8s;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #e8ebf0;
    border-radius: 24px;
    overflow: hidden;
    width: 50vw;
    max-width: 680px;
    min-width: 600px;
    min-height: 610px;
    display: flex;
    flex-direction: column;
  }
  &-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    .@{feature-prefix}-more {
      width: 50%;
      max-width: 320px;
      margin-bottom: 8px;
    }
  }
  &-content {
    flex: 1;
    overflow: hidden;
    min-height: 416px;
    padding: 16px 32px 0 32px;
    .so-carousel {
      height: 400px;
    }
    .@{feature-prefix}-feature {
      background: #fff;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .@{feature-prefix}-image {
        padding: 24px;
        margin: 16px 0;
        border-radius: 12px;
        text-align: center;
      }
      .@{feature-prefix}-desc {
        padding: 12px 0;
        color: #141737;
        overflow: auto;
        line-height: 22px;

        .@{feature-prefix}-line-icon {
          display: inline-block;
          width: 4px;
          height: 12px;
          background: @colors-primary;
          border-radius: 0px 100px 100px 0px;
          margin-right: 4px;
          position: relative;
          top: 1px;
        }
      }
    }
    a.so-carousel-indicator-active {
      background: @colors-primary;
    }
  }
  &-header {
    font-weight: 600;
    color: #141737;
    font-size: 18px;
    text-align: center;
    padding: 24px;
    border-bottom: 1px solid #E8EBF0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}